<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
		<title>spirit</title>
		<!-- bootstrap -->
		<link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

		<!-- animate.css -->
		<link rel="stylesheet" href="./assets/css/animate.min.css" />

		<!-- 重置样式 -->
		<link rel="stylesheet/less" href="./assets/css/reset.less" />

		<!-- 公共样式 -->
		<link rel="stylesheet/less" href="./assets/css/common.less" />

		<!-- 页面独立的 -->
		<link rel="stylesheet/less" href="./assets/css/index.less" />
	</head>
	<body>

		<div class="header" id="header">
			<nav class="navbar navbar-inverse">
				<div class="container">
					<div class="container-fluid">
						<div class="navbar-header">
							<button type="button" class="navbar-toggle collapsed wow fadeInLeft" data-toggle="collapse"
								data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
								<span class="sr-only">Toggle navigation</span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
							</button>
							<!-- LOGO -->
							<a class="navbar-brand logo wow fadeInLeft" href="#">Spirit8</a>
						</div>

						<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
							<ul class="nav navbar-nav navbar-right">
								<!-- 菜单 -->
								<li><a href="#" class="wow fadeInRight" data-wow-delay="100ms">Home</a></li>
								<li><a href="#about" class="wow fadeInRight" data-wow-delay="200ms">About</a></li>
								<li><a href="#SERVICES" class="wow fadeInRight" data-wow-delay="300ms">SERVICES</a></li>
								<li><a href="#portfolio" class="wow fadeInRight" data-wow-delay="400ms">portfolio</a>
								</li>
								<li><a href="#testimonials" class="wow fadeInRight"
										data-wow-delay="500ms">testimonials</a></li>
								<li><a href="#contact" class="wow fadeInRight" data-wow-delay="600ms">CONTACT</a></li>
							</ul>
						</div>
					</div>
				</div>
			</nav>
		</div>

		<div id="banner">
			<video src="./assets/images/banner.mp4" id="background" autoplay muted loop></video>
			<div class="content">
				<p class="title wow lightSpeedIn">
					wELCOME on <span>spirit8</span>
				</p>
				<div class="desc wow fadeInLeft" data-wow-delay="100ms">
					We are a digital agency with <span>years of experience</span> and with <span>extraordinary
						people</span>
				</div>
			</div>
			<div class="down wow fadeInLeft">
				<a href="#footer">
					<img src="./assets/images/xiangxia.png" />
				</a>
			</div>
		</div>

		<div class="about" id="about">
			<div class="container">
				<div class="left wow fadeInLeft">
					<img src="./assets/images/about-background.png" alt="">
				</div>
				<div class="right">
					<div class="wow fadeInLeft data-wow-delay=" 200ms">
						<p class="title">About us</p>
						<h3>
							<span>Some</span> words <span>about us</span>
						</h3>
					</div>
					<div class="desc wow fadeInLeft">
						We love building and rebuilding brands through our specific skills. Using colour, fonts, and
						illustration, we brand companies in a way they will never forget.
					</div>
					<div class="wow fadeInLeft" data-wow-delay="100ms">
						<ul>
							<li>
								<span>Mission&nbsp;- </span> &nbsp;We deliver uniqueness and quality
							</li>
							<li>
								<span>Mission&nbsp;-</span> &nbsp;Delivering fast and excellent results
							</li>
							<li>
								<span>Mission&nbsp;-</span> &nbsp;Satisfied clients thanks to our experience
							</li>
						</ul>
					</div>
					<div class="btns wow fadeInLeft">
						<img src="./assets/images/about-btn.png" />
						<span>Browse our work</span>
					</div>
				</div>
			</div>
		</div>

		<div class="figure" id="SERVICES">
			<div class="figure_title wow fadeInLeft">MEET <span>OUR TEAM</span></div>
			<div class="figure_line wow fadeInLeft">
				<img src="assets/images/title-background.png" />
			</div>
			<ul class="figure_list" data-wow-delay="200ms">
				<li>
					<div class="img wow fadeInLeft">
						<img src="./assets/images/cover.png" alt="">
					</div>
					<div class="content wow fadeInLeft">
						<h3>Jason Statham</h3>
						<span>Knife designer</span>
						<p>Do not seek to change what has come before. Seek to create that which has not.</p>
					</div>
				</li>
				<li>
					<div class="img wow fadeInLeft">
						<img src="./assets/images/cover.png" alt="">
					</div>
					<div class="content wow fadeInLeft">
						<h3>Van Damme</h3>
						<span>No English</span>
						<p>Do not seek to change what has come before. Seek to create that which has not.</p>
					</div>
				</li>
				<li>
					<div class="img wow fadeInLeft">
						<img src="./assets/images/cover.png" alt="">
					</div>
					<div class="content wow fadeInLeft">
						<h3>Sylvester Stallone</h3>
						<span>Cigar Lover</span>
						<p>Do not seek to change what has come before. Seek to create that which has not.</p>
					</div>
				</li>
				<li>
					<div class="img wow fadeInLeft">
						<img src="./assets/images/cover.png" alt="">
					</div>
					<div class="content wow fadeInLeft">
						<h3>Jet Li</h3>
						<span>I need more money</span>
						<p>Do not seek to change what has come before. Seek to create that which has not.</p>
					</div>
				</li>
			</ul>
			<div class="btns wow fadeInLeft" data-wow-delay="300ms">
				<label></label>
				<label></label>
				<label></label>
			</div>
		</div>

		<div class="figure1" id="portfolio">
			<div class="figure1_title wow fadeInLeft">TAKE LOOK AT <span>OUR SERVICES</span></div>
			<div class="figure1_line wow fadeInLeft">
				<img src="assets/images/title-background.png" />
			</div>
			<div class="figure1_  wow fadeInLeft">
				Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of
				Good and
				Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during
				the
				Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
				1.10.32.
			</div>
			<ul class="figure1_list" data-wow-delay="200ms">
				<li>
					<div class="figure1_img wow fadeInLeft">
						<img src="./assets/images/t1.png" alt="">
					</div>
					<div class="figure1_content wow fadeInLeft">
						<h3>WEB DESIGN</h3>
						<p>The first line of Lorem lpsum , "Lorem ipsum dolor sit maet...",comes from a line in section
							1.10.32.</p>
					</div>
				</li>
				<li>
					<div class="figure1_img wow fadeInLeft">
						<img src="./assets/images/t2.png" alt="">
					</div>
					<div class="figure1_content wow fadeInLeft">
						<h3>MOBILE APPS</h3>
						<p>The first line of Lorem lpsum , "Lorem ipsum dolor sit maet...",comes from a line in section
							1.10.32.</p>
					</div>
				</li>
				<li>
					<div class="figure1_img wow fadeInLeft">
						<img src="./assets/images/t3.png" alt="">
					</div>
					<div class="figure1_content wow fadeInLeft">
						<h3>PHOTOGRAPHY</h3>
						<p>The first line of Lorem lpsum , "Lorem ipsum dolor sit maet...",comes from a line in section
							1.10.32.</p>
					</div>
				</li>
				<li>
					<div class="figure1_img wow fadeInLeft">
						<img src="./assets/images/t4.png" alt="">
					</div>
					<div class="figure1_content wow fadeInLeft">
						<h3>MARKETING</h3>
						<p>The first line of Lorem lpsum , "Lorem ipsum dolor sit maet...",comes from a line in section
							1.10.32.</p>
					</div>
				</li>
			</ul>
		</div>

		<div class="trademark">
			<div class="trademark_title wow fadeInLeft">SOME OF <span>OUR CLIENTS</span></div>
			<div class="trademark_line1 wow fadeInLeft">
				<img src="assets/images/title-background.png" />
			</div>
			<div class="trademark_line2 wow fadeInLeft">
				<img src="assets/images/t5.png" />
			</div>
			<div class="btns wow fadeInLeft" data-wow-delay="300ms">
				<label></label>
				<label></label>
				<label></label>
			</div>
		</div>

		<div id="work" id="testimonials">
			<div class="container wow fadeInLeft">
				<div class="title wow fadeInLeft">
					<h3>take a look at <span>our work</span></h3>
				</div>
				<p>
					Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes
					of Good and
					Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular
					during the
					Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in
					section
					1.10.32.
				</p>
				<div class="navlist wow fadeInLeft">
					<div class="filter wow fadeInLeft">
						Filter by type
					</div>
					<div class="all wow fadeInLeft">
						<a href="javascript:void(0)">All</a>
						<a href="javascript:void(0)">Web design </a>
						<a href="javascript:void(0)">Mobile design </a>
						<a href="javascript:void(0)">Photograpy</a>
					</div>
				</div>
				<div class="list">
					<div class="item wow fadeInLeft">
						<img src="./assets/images/work-img.png" alt="">
					</div>
					<div class="item wow fadeInRight">
						<img src="./assets/images/work-img.png" alt="">
					</div>
					<div class="item wow fadeInLeft">
						<img src="./assets/images/work-img.png" alt="">
					</div>
					<div class="item wow fadeInRight">
						<img src="./assets/images/work-img.png" alt="">
					</div>
					<div class="item wow fadeInLeft">
						<img src="./assets/images/work-img.png" alt="">
					</div>
					<div class="item wow fadeInRight">
						<img src="./assets/images/work-img.png" alt="">
					</div>
					<div class="item wow fadeInLeft">
						<img src="./assets/images/work-img.png" alt="">
					</div>
					<div class="item wow fadeInRight">
						<img src="./assets/images/work-img.png" alt="">
					</div>
					<div class="item wow fadeInLeft">
						<img src="./assets/images/work-img.png" alt="">
					</div>
					<div class="item wow fadeInRight">
						<img src="./assets/images/work-img.png" alt="">
					</div>
					<div class="item wow fadeInLeft">
						<img src="./assets/images/work-img.png" alt="">
					</div>
					<div class="item wow fadeInRight">
						<img src="./assets/images/work-img.png" alt="">
					</div>
				</div>
			</div>
		</div>

		<div class="trademark1">
			<div class="trademark1_title wow fadeInLeft">SOME OF <span>OUR CLIENTS</span></div>
			<div class="trademark1_line1 wow fadeInLeft">
				<img src="assets/images/title-background.png" />
			</div>
			<div class="trademark1_line2 wow fadeInLeft">
				<p class="p1">
					Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes
					of Good and
					Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in
					section
					1.10.32.
				</p>
				<p class="p2">
					Dean Martin,<span>CEO Acme lnc.</span>
				</p>
			</div>
			<div class="btns wow fadeInLeft" data-wow-delay="300ms">
				<label></label>
				<label></label>
				<label></label>
			</div>
		</div>

		<div id="contact">
			<div class="container">
				<div class="title wow fadeInLeft">
					<h3>feel free to <span>contact us</span></h3>
				</div>
				<p class="wow fadeInLeft">
					Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes
					of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very
					popular during the Renaissance.
				</p>
				<div class="box">
					<div class="top">
						<div class="left wow fadeInLeft">
							<div>
								name <sup>*</sup>
							</div>
							<div>
								<input type="text">
							</div>
						</div>
						<div class="right wow fadeInLeft">
							<div>
								Email address <sup>*</sup>
							</div>
							<div>
								<input type="text">
							</div>
						</div>
					</div>
					<div class="message wow fadeInLeft">
						<div>
							Message<sup>*</sup>
						</div>
						<textarea></textarea>
					</div>
					<div class="send wow fadeInLeft">
						send
					</div>
				</div>
			</div>
		</div>

		<div id="footer">
			<div class="container">
				<div class="left">
					ALL RIGHTS RESERVED. COPYRIGHT © 2014 SPIRIT8
				</div>
				<div class="right">
					<a href="javascript:void(0)">f</a>
					<a href="javascript:void(0)">f</a>
					<a href="javascript:void(0)">f</a>
					<a href="javascript:void(0)">f</a>
					<a href="javascript:void(0)">f</a>
				</div>
			</div>
		</div>

		<!-- 返回顶部 -->
		<div id="back">
			<a href="#banner" id="gotop">
				<img src="assets/images/hddb.png" />
			</a>
		</div>




	</body>
</html>
<!-- 解析less的文件 -->
<script src="./assets/js/less.min.js"></script>

<!-- jquery  -->
<script src="./assets/js/jquery.min.js"></script>

<!-- bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- wow.js -->
<script src="./assets/js/wow.min.repeat.js"></script>

<script>
	//获取id为background的元素
	var background = document.getElementById("background")

	//将视频速度调慢
	background.playbackRate = 5

	//实例化wow.js
	new WOW().init()


	// 滚动监听
	// a href == id 
	//锚点跳转滑动效果  
	$('#bs-example-navbar-collapse-1 a[href],#banner a[href],#back a[href]').click(function() {
		if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this
			.hostname) {
			var $target = $(this.hash);
			$target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
			if ($target.length) {
				var targetOffset = $target.offset().top;
				$('html,body').animate({
					scrollTop: targetOffset
				}, 1000);
				return false;
			}
		}
	});

	//给页面绑定一个滚动条事件
	$(document).scroll(function() {
		//获取滚动条滚动长度大小
		var distance = $(this).scrollTop()

		//当滚动条滚动的长度大于10
		if (distance > 10) {
			//显示返回顶部
			$("#gotop").css({
				zIndex: 99998,
				opacity: 1
			});
			$("#header").css({
				backgroundColor: '#111111',
				paddingBottom: 0
			});
		} else {
			//隐藏返回顶部
			$("#gotop").css({
				zIndex: -99998,
				opacity: 0
			});
			$("#header").css({
				backgroundColor: '#000000',
				paddingBottom: '1em'
			});
		}
	})
</script>